import React,{ Component, RefObject } from 'react';
import ArticleIndex from './articleIndex';
import ArticleContent from './articleContent';
import Header from './header';
import { Row, Col, GradientsBar, Button} from '../../components/exports';
import './style/home.scss';

export default class Home extends Component<any>{

	state = {
		mobile: false,
		display: false
	}

	componentDidMount(){
		if(window.innerWidth < 768){
			this.setState({
				mobile: true,
			})
		}
	}

	render(){

		let pc = (
			<Row>
				<Col xs={2}>
					<ArticleIndex></ArticleIndex>
				</Col>
				<Col xs>
					<ArticleContent></ArticleContent>
				</Col>
			</Row>
		)

		let mobile = (
			<React.Fragment>
				<ArticleIndex mobile={this.state.mobile}></ArticleIndex>
				<ArticleContent></ArticleContent>
			</React.Fragment>
		)

		return (
			<React.Fragment>
				<Header></Header>
				{this.state.mobile ? mobile: pc}
			</React.Fragment>
		)
	}
}

